<template>
  <el-dialog
    :visible="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="'用户选择'"
    append-to-body
    destroy-on-close
    width="700px"
    custom-class="account-transfer-dialog"
    @close="handleClose"
  >
    <el-input
      v-model="query.userName"
      placeholder="用户账号/名称"
      prefix-icon="el-icon-search"
      size="small"
      clearable
      style="margin-bottom: 20px; width: 220px; margin-right: 10px"
    />
    <el-button type="primary" size="small" @click="getUserList">搜索</el-button>
    <div class="tableCon">
      <el-table
        ref="multipleTable"
        :data="tableData"
        height="500px"
        tooltip-effect="dark"
        border
        max-height="400px"
        style="width: 100%"
      >
        <el-table-column
          :index="function(index){
            return index+1
          }"
          label="序号"
          align="center"
          type="index"
          width="55"
        >
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.checked"
              @change="handleRowChange($event, scope.row)"
            >{{ scope.$index+1 }}</el-checkbox>
          </template>

        </el-table-column>
        <el-table-column
          v-for="(item,index) in colList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width||''"
          header-align="center"
          align="center"
        />
      </el-table>
      <el-pagination
        :total="query.total"
        background
        layout="prev, pager, next"
        small
        style="position: absolute; right: 11px"
        @current-change="handleCurrentChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button :disabled="!selectUser" size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getUserList } from '@/api/user/index'

export default {
  props: {
    userType: {
      type: Number,
      default: 1,
      required: true
    },
    phid: {
      type: Number,
      required: true,
      default: 1
    }
  },
  data() {
    return {
      visible: false,
      colList: [{
        prop: 'account',
        label: '用户账号'
      }, {
        prop: 'userName',
        label: '用户名称'
      }],
      tableData: [],
      query: {
        total: 0,
        current: 1,
        userType: this.userType,
        phid: this.phid,
        userName: ''
      },
      selectUser: ''
    }
  },
  created() {
    this.getUserList()
  },
  mounted() {
    this.visible = true
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleSubmit() {
      this.$emit('sure', this.selectUser)
    },
    getUserList() {
      this.selectUser = null
      getUserList({ ...this.query }).then(({ data: { records, total }}) => {
        this.query.total = total
        this.tableData = records
          .filter(v => v.phid !== this.phid)
          .map(v => ({ ...v, checked: false }))
      }).catch(err => {
        console.log('err', err)
      })
    },
    handleRowChange(val, rowData) {
      this.tableData = this.tableData.map(v => ({
        ...v,
        checked: v.phid === rowData.phid ? val : false
      }))
      this.selectUser = rowData
    },
    handleCurrentChange(val) {
      this.query.current = val
      this.getUserList()
    }
  }
}
</script>

<style lang="scss">
.account-transfer-dialog {

}
</style>
